<!-- 页面 -->
<template>
    <div class="shou">
        <div class="shou1">
            <lun ></lun>
        </div>
        <div class="shou2">
            <ul>
                <li><div><van-icon  size="50px" name="chat-o" /><br> 签到</div> </li>
                <li><div><van-icon  size="50px" name="bag-o" /><br> 礼券</div></li>
                <li><div><van-icon  size="50px" name="after-sale" /><br> 砍价</div></li>
                <li><div><van-icon  size="50px" name="certificate" /><br> 专栏</div></li>
            </ul>
        </div>
        <div class="shou3">
            <p>全民砍价></p>
        </div>
        <p class="pp1">精选专题></p>
        <lun></lun>
        <dic :index='index' class="dd"></dic>
    </div>
</template>
<!-- vue -->
<script>
import dic from '@/components/div.vue';
import lun from '@/components/lunbo.vue';
export default {
    components: {
        dic,
        lun
    },
    data() {
        return {
            // 声明的属性
            index:0,
        }
    },
    //生命周期函数
    mounted() {
    },
    // 调用方法
    methods: {
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.shou {
    width: 100%;
    height: 100%;
    background: #ccc;
}

.shou .shou1 {
        /* width: 100%;
        height: 250px; */
    background: #ccc;
}

.shou .shou2 {
    width: 100%;
    height: 6.25rem;
    background: white;
}
.shou .shou3 {
    width: 100%;
    height: 4.0rem;
}
.shou .shou3 p{
    width: 100%;
    height: 2.0rem;
    background:white;
    color: black;
    margin-top: 1.25rem;
    font-size: 20px;
    text-align: center;
}
.shou ul{
    width: 100%;
}
.shou ul li {
    width: 25%;
    text-align: center ;
    display: inline-flex;
    font-size: 20px;
    line-height: 50px;
}

.dd {
    width: 100%;
    background: white;
    position: fixed;
    bottom: 0px;
}
.shou .pp1{
    width: 100%;
    text-align: center;
    background: white;
    font-size: 20px;
}
</style>